<template>
  <div @click="add">
    hello world -- {{ state.count }}
    age{{ age }}

  </div>
</template>

<script setup>
import {  reactive  } from './reactivity/reactive.js';
import { effect } from './reactivity/effect.js'
import { ref} from 'vue'
 
const age = ref(10)
const state = reactive({
  count: 0
})
const add = ()=>{
  age.value++;
  state.count++  // 直接修改 state 值，视图会立即更新
}
effect(() => {
  console.log('count 变化了', state.count);  // 依赖 state 的 effect 立即执行
})
</script>

<style lang="css" scoped>

</style>